<template>
  <div>
    <table-search
      ref="tableSearch"
      :title="'商品列表( ' + totalNum + ' )'"
      selection
      :columns="columns"
      :api="getList"
      @selection-change="onSelectionChange"
    >
      <div slot="table-title" style="text-align: right; flex: 1">
        <el-button
          type="primary"
          size="mini"
          @click="onExport"
          :disabled="!selection.length"
          >导出所选商品</el-button
        >
      </div>

      <template #operate="{ row }">
        <router-link
          :to="`/customer/projectInfo/detail?id=${row.id}`"
          target="_blank"
        >
          <el-button type="text" size="small">查看详情</el-button>
        </router-link>
      </template>
    </table-search>
  </div>
</template>

<script>
import {
  defineComponent,
  computed,
  ref,
  getCurrentInstance,
} from '@vue/composition-api'
import TableSearch from '@/components/TableSearch/TableSearch'
import { createTableColumns } from '@/components/TableSearch/utils'

import { page } from '@/api/projectInfo'

import { downLoadFile } from '@/lib/utils'
import Http from '@/lib/http'

import { useProjectCustomerSetting } from '@/hooks/project'

export default defineComponent({
  components: {
    TableSearch,
  },
  setup() {
    const instance = getCurrentInstance()
    const { state: projectState } = useProjectCustomerSetting()

    const columns = computed(() => {
      return createTableColumns([
        [
          '创建时间',
          'createTime',
          { search: { key: ['createStartTime', 'createEndTime'] }, width: 160 },
        ],
        [
          '公司名称',
          'companyName',
          {
            search: {
              key: 'companyCode',
              type: 'select',
              options: [
                { label: '全部', value: '' },
                { label: '本公司', value: 1 },
                { label: '其他', value: 2 },
              ],
            },
          },
        ],
        ['sku商品编码', 'skuId', { search: true }],
        ['商品名称', 'goodsName', { search: true }],
        ['类目', 'categoryName', { search: true }],
        ['品牌', 'brandName', { search: true }],
        ['型号', 'model', { search: true }],
        ['参数规格', 'spec', { search: true }],
        ['销售价格', 'salesPrice'],
        ['操作', 'operate'],
      ])
    })

    const totalNum = ref(0)
    const getList = async (startPage, size, query) => {
      query['purchasePlatformId'] = projectState.projectId
      !query['companyCode'] && (query['companyCode'] = 0)
      const { goodsBaseInfo } = await page(startPage, size, query)
      totalNum.value = goodsBaseInfo.total
      return goodsBaseInfo
    }

    const selection = ref([])
    const onSelectionChange = val => {
      selection.value = val
    }

    const onExport = () => {
      downLoadFile(
        Http.getUrl(
          `/projectInformation/exportGoodsExcel?exportIds=${selection.value
            .map(item => item.id)
            .join(',')}`
        )
      )
    }

    return {
      columns,
      getList,
      onSelectionChange,
      onExport,
      selection,
      totalNum,
    }
  },
})
</script>

<style lang="scss" scoped>
.grey {
  color: #bbb;
}
.red {
  color: red;
}
.hasEdit {
  position: absolute;
  top: 0;
  left: 0;
  &::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 30px solid red;
    border-right: 30px solid transparent;
  }
  .text {
    position: absolute;
    top: -3px;
    left: 2px;
    color: #fff;
    font-size: 12px;
  }
}
.audit-detail {
  color: #000;
}
.audit-detail ::v-deep strong {
  color: red;
}
</style>
